// 组件的状态和颜色对应关系
@mixin colorState($selector, $states) {
  #{ $selector } {
    border-color: nth(nth($states, 1), 2);
    background: nth(nth($states, 1), 3);
    color: nth(nth($states, 1), 4);
    &:hover {
      border-color: nth(nth($states, 2), 2);
      background: nth(nth($states, 2), 3);
      color: nth(nth($states, 2), 4);
    }
    &:focus {
      border-color: nth(nth($states, 3), 2);
      background: nth(nth($states, 3), 3);
      color: nth(nth($states, 3), 4);
    }
    &:active {
      border-color: nth(nth($states, 4), 2);
      background: nth(nth($states, 4), 3);
      color: nth(nth($states, 4), 4);
    }
    &:disabled,
    &[disabled] {
      border-color: nth(nth($states, 5), 2);
      background: nth(nth($states, 5), 3);
      color: nth(nth($states, 5), 4);
      cursor: not-allowed;
    }
  }
}

@mixin buttonColorState($selector, $states) {
  #{ $selector } {
    border-color: nth(nth($states, 1), 2);
    background: nth(nth($states, 1), 3);
    color: nth(nth($states, 1), 4);
    &:hover {
      border-color: nth(nth($states, 2), 2);
      background: nth(nth($states, 2), 3);
      color: nth(nth($states, 2), 4);
    }
    &:active {
      border-color: nth(nth($states, 3), 2);
      background: nth(nth($states, 3), 3);
      color: nth(nth($states, 3), 4);
    }
    &:disabled,
    &[disabled] {
      border-color: nth(nth($states, 4), 2);
      background: nth(nth($states, 4), 3);
      color: nth(nth($states, 4), 4);
      cursor: not-allowed;
    }
  }
}

@mixin text-overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// -------- panel -----------

// dropdown panel
@mixin panel-default-style {
  background-color: $popup-background;
  border: $border-none;
  border-radius: $border-radius-md;
  box-shadow: $shadow-sm;
}

// tooltip panel
@mixin panel-tooltip-style {
  background-color: $tips-background;
  border: $border-none;
  border-radius: $border-radius-md;
  box-shadow: $shadow-md;
}

// modal/popup panel
@mixin panel-popup-style {
  background-color: $component-background;
  border: $border-none;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-md;
}

// notification panel
@mixin panel-notification-style {
  background-color: $popup-background;
  border: $border-none;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-sm;
}

// drawer panel
@mixin panel-drawer-style {
  background-color: $component-background;
  border: $border-none;
  border-radius: $border-radius-none;
  box-shadow: $shadow-lg;
}

// dropdown empty panel
@mixin panel-dropdown-empty-style {
  display: flex;
  align-items: center;
  width: 100%;
  height: $panel-empty-height;
}

@mixin PanelBorderBox() {
  margin: $margin-xs 0;
  box-shadow: 0 0.02rem 0.08rem 0 $shadow-color;
  border-radius: $border-radius-md;
}

@mixin panel-option-selected {
  color: $selection-color;
  background: $selection-background-color;
}

@mixin panel-option-hover {
  background: $selection-background-color-hover;
}

@mixin loadingIcon() {
  width: $icon-size-base;
  height: $icon-size-base;
}

@mixin loadingIconLarge() {
  width: $icon-size-md;
  height: $icon-size-md;
}

@mixin icon-size {
  width: $icon-size-base;
  height: $icon-size-base;
}

@mixin icon-size-md {
  width: $icon-size-md;
  height: $icon-size-md;
}

@mixin icon-size-large {
  width: $icon-size-lg;
  height: $icon-size-lg;
}

@mixin icon-size-xl {
  width: $icon-size-xl;
  height: $icon-size-xl;
}

// -------- component scroll -----------
$component-scrollbar-size: 0.08rem;
$component-scrollbar-radius: 0.08rem;

@mixin scrollbar() {
  // firefox
  @-moz-document url-prefix() {
    scrollbar-width: thin; // 比默认滚动条窄
    scrollbar-color: $component-scrollbar-thumb-background $component-scrollbar-background; // 第一个滚轮颜色，第二个滚动条背景色
  }
  scrollbar-track-color: $component-scrollbar-background;
  -ms-scrollbar-track-color: $component-scrollbar-background;

  // 滚动条整体部分,垂直滚动条的宽度和水平滚动条的高度
  &::-webkit-scrollbar {
    width: $component-scrollbar-size;
    height: $component-scrollbar-size;
    background-color: $component-scrollbar-background;
    transition: all 500ms;
  }

  // 滚动条两端的按钮
  &::-webkit-scrollbar-button {
    display: none;
  }

  // 边角
  &::-webkit-scrollbar-corner {
    background-color: $component-scrollbar-background;
  }

  // 外层轨道
  &::-webkit-scrollbar-track {
    background-color: $component-scrollbar-background;
  }

  // 内层轨道，滚动条中间部分（除去）
  &::-webkit-scrollbar-track-piece {
    background-color: $component-scrollbar-background;
  }

  // 滑块
  &::-webkit-scrollbar-thumb {
    min-height: 0.6rem;
    background-color: $component-scrollbar-thumb-background;
    background-clip: padding-box;
    border-color: $component-scrollbar-background;
    border-style: solid;
    border-radius: $component-scrollbar-radius;
  }
}

@mixin scroll-base() {
  @include scrollbar;

  // 滑块
  &::-webkit-scrollbar-thumb {
    border-width: 0.02rem;
  }

  &::-webkit-scrollbar-thumb:hover {
    border-color: $component-scrollbar-thumb-border-color;
    border-width: 0;
  }

  &::-webkit-scrollbar-thumb:vertical {
    box-shadow: 0.04rem 0 0 $component-scrollbar-thumb-background inset;
  }

  &::-webkit-scrollbar-thumb:vertical:hover {
    box-shadow: 0.08rem 0 0 $component-scrollbar-thumb-hover-background inset;
  }

  &::-webkit-scrollbar-thumb:horizontal {
    box-shadow: 0 0.04rem 0 $component-scrollbar-thumb-background inset;
  }

  &::-webkit-scrollbar-thumb:horizontal:hover {
    box-shadow: 0 0.08rem 0 $component-scrollbar-thumb-hover-background inset;
  }
}

@mixin scroll-lg() {
  @include scrollbar;

  // 滑块
  &::-webkit-scrollbar-thumb {
    border-width: 0;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: $component-scrollbar-thumb-hover-background;
  }
}

// 下拉面板类，输入类
@mixin component-scroll() {
  @include scroll-base;
}

// 双向选择器，表格，列，树，抽屉，气泡窗，全局导航
@mixin component-scroll-lg() {
  @include scroll-lg;
}

@mixin input-help-tooltip($right) {
  .lv-input-help-tooltip {
    position: absolute;
    top: 50%;
    z-index: 2;
    color: $text-color-tertiary;
    line-height: 0;
    transform: translateY(-50%);
    right: $right;
  }
}
